import { HtmlNode, HtmlNodeModel, h as lfh } from '@logicflow/core'
import { createApp, h } from 'vue'
import Html from './startHtml.vue'

// 提供节点的dom
class CustomHtmlNode extends HtmlNode {
  /*Vue组件*/
  setHtml(rootEl) {
    const { properties } = this.props.model
    const el = document.createElement('div')
    const graphModel = this.props.graphModel
    rootEl.innerHTML = ''
    rootEl.appendChild(el)
    /**挂载-Vue3组件**/
    // createApp(Html).mount(el)

    createApp({
      render: function () {
        return h(Html, {
          ...properties,
          graphModel,
          //https://v3.cn.vuejs.org/guide/render-function.html#v-on
          onChangeData: (value) => {
            console.log('changeData', value)
          }
        })
      }
    }).mount(el)
    // setupCustomComponents(app)
  }

  /* 纯HTML*/
  /*
    setHtml(rootEl) {
        const { properties } = this.props.model;
        const el = document.createElement('div');
        el.className = 'lf-html-wrapper';
        const html = `
                        <div class="custom-html">
                            <div class="custom-head">HTML</div>
                            <div class="custom-body">
                              <div>${properties.text}</div>
                            </div>
                        </div>
                    `
        el.innerHTML = html;
        rootEl.innerHTML = '';
        rootEl.appendChild(el);
    }
    */
}

// 提供节点的样式
class CustomHtmlNodeModel extends HtmlNodeModel {
  setAttributes() {
    this.text.editable = false // 禁止节点文本编辑
    this.menu = []
  }
  getConnectedTargetRules() {
    const rules = super.getConnectedTargetRules()
    const geteWayOnlyAsTarget = {
      message: '开始节点只能连出，不能连入！',
      validate: (source) => {
        let isValid = true
        if (source) {
          isValid = false
        }
        return isValid
      }
    }
    rules.push(geteWayOnlyAsTarget)
    return rules
  }
  getNodeStyle() {
    const style = super.getNodeStyle()
    style.stroke = '#2987ff'
    style.fill = 'transparent'
    style.strokeWidth = 2
    return style
  }

  initNodeData(data) {
    super.initNodeData(data)
    const width = 180
    const height = 55
    this.width = width
    this.height = height
    this.anchorsOffset = [
      [width / 2 + 5, 0],
      [0, height / 2 + 5],
      [-width / 2 - 5, 0],
      [0, -height / 2 - 5]
    ]
  }

  /*
    setAttributes() {
        this.text.editable = false; // 禁止节点文本编辑
        const width = 100;
        const height = 80;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [
            [width / 2, 0],
            [0, height / 2],
            [-width / 2, 0],
            [0, -height / 2],
        ]
    }
    */
}

export default {
  type: 'startEvent',
  view: CustomHtmlNode,
  model: CustomHtmlNodeModel
}
